<template>
  <el-dropdown class="avatar-dropdown" @command="handlerCommand">
    <el-avatar :size="avatarSize" shape="square" :src="avatarUrl"
      >User</el-avatar
    >
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>昵称：冰糖先生</el-dropdown-item>
      <el-dropdown-item command="center">个人中心</el-dropdown-item>
      <el-dropdown-item>首页</el-dropdown-item>
      <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import variables from "@/common/scss/variables.scss";
export default {
  name: "avatarWrap",
  data() {
    return {
      avatarUrl:
        "https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png"
    };
  },
  computed: {
    //headStyle
    avatarSize: function() {
      return parseInt(variables.headerHeight) * 0.65;
    }
  },
  methods: {
    handlerCommand(command) {
      if (command === "center") {
        this.$router.push("/center");
      } else if (command === "logout") {
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar-dropdown {
  display: block;
}
</style>
